<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'

const animationDuration = 3000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: window.innerHeight-230+'px'
    },
    chartData: {
      type: Object
    }
  },
  data() {
    return {
      chart: null,
      colors: ['RGBA(2, 242, 229, 1)', 'RGBA(229, 185, 35, 1)','rgba(71, 147, 229, 1.0)','rgba(170, 61, 10, 1.0)','rgba(204, 136, 204, 1.0)'],
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  methods: {
    initChart() {
      this.width = "1200px !important"
      this.chart = echarts.init(this.$el, 'macarons')
      // this.chartData ={
      //   data: [
      //     [100, 120, 161, 134, 105, 160, 165],
      //     [120, 82, 91, 154, 162, 140, 145],
      //     [80, 52, 200, 334, 390, 330, 220]
      //   ],
      //   legend: ['第一行', '第二行', '第三行'],
      //   indicator: ['第一列', '第二列', '第三列','第四列', '第五列', '第六列'],
      // }
      this.setOptions(this.chartData)
    },
    setOptions(chartData) {
      var indicators =[]
      var colors =[]
      var datas =[]
      for(var i=0;i<chartData.xdata.length;i++){
        var indicator =  { name: chartData.xdata[i]}
        indicators.push(indicator)
      }
      for(var i=0;i<chartData.legend.length;i++){
        var color =  this.colors[i]
        colors.push(color)
        var data = {
          value: chartData.ydata[i],
          name: chartData.legend[i],
          symbol: 'none',
          areaStyle: {
            normal: {
              color: this.colors[i],
              opacity: 0.4
            }
          },
          lineStyle: {
            width: 2,
            color: this.colors[i]
          }
        }
        datas.push(data)
      }
      this.chart.setOption({
        color: colors,
        tooltip: {},
        radar: {
          radius: '76%',
          center: ['50%', '45%'],
          splitNumber: 8,
          name: {
            textStyle: {
              color: '#18191B',
              fontSize: 12
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#e5eef7' // 设置网格的颜色
            }
          },
          splitArea: {
            show: false
          },
          indicator: indicators
        },
        legend: {
          left: '0%',
          top: '40%',
          itemWidth: 24,
          itemHeight: 22,
          orient: 'vertical',
          data: chartData.legend,
        },
        series: [{
          type: 'radar',
          symbolSize: 0,
          areaStyle: {
            normal: {
              shadowBlur: 13,
              shadowColor: 'rgba(0,0,0,.2)',
              shadowOffsetX: 0,
              shadowOffsetY: 10,
              opacity: 1
            }
          },
          data: datas
          // animationDuration: animationDuration
        }]
      },true)
    }
  }
}
</script>
